import { Chart, Axis, Geom, Coord, Global, Tooltip } from 'bizgoblin';

const defs = [{
  dataKey: 'count',
}];

function formatLabel(text, index, total) {
  const textCfg = {};
  if (index === 0) {
    textCfg.textAlign = 'left';
  } else if (index === total - 1) {
    textCfg.textAlign = 'right';
  }
  return textCfg;
}

function BarChart(props) {

  const { data } = props

  return (
    <>
      <Chart width="100%" height="100%" data={data} defs={defs} pixelRatio={window.devicePixelRatio * 2} padding={[0, 20, 20, 30]}>
        <Axis dataKey="name" grid={null} />
        <Axis dataKey="count" label={formatLabel} line={null} grid={Global._defaultAxis.grid} />
        <Coord transposed />
        <Tooltip offsetY={50} showTitle={true} />
        <Geom geom="interval" position="name*count" />
      </Chart>
    </>
  )
}

export default BarChart